<script setup>
import {reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const uploader = ref();
const uploader2 = ref();
const imgcid = ref();

const descriptionVisible = ref(false);
const editDescriptionVisible = ref(false);
const createCourseVisible = ref(false);
const upLoadCourseImgVisible = ref(false);

const courses = reactive({
  data: [],
});
const description = reactive({
  data: {},
});
const newCourse = reactive({
  data: {
    cname: '',
    count: '',
    stime: '',
    etime: '',
    classHours: '',
    fullPrice: '',
  }
})

const courseImg = ref({
  imageUrl: '',
  hasUrl: false
})

const getDescription = (index, data) => {
  console.log(data.cid);
  axios.get('http://localhost:8080/v1/coach/course/findintro?cid=' + data.cid).then((response) => {
    if (response.data.state === 2001) {
      console.log(response.data)
      description.data = response.data.data;
    } else {
      description.data = {
        text1: '暂无描述',
        text2: '暂无描述'
      }
    }
  })
  descriptionVisible.value = true;
}

const closeDescription = () => {
  descriptionVisible.value = false;
  description.data = {};
}

const closeCreateCourse = () => {
  console.log("close")
  newCourse.data = {
    cname: '',
    count: '',
    stime: '',
    etime: '',
    classHours: '',
    fullPrice: '',
  }
  uploader2.value = null;
  courseImg.value.hasUrl = false;
  courseImg.value.imageUrl = '';
  createCourseVisible.value = false;
}

const editDescription = (index, data) => {
  console.log(data.cid);
  axios.get('http://localhost:8080/v1/coach/course/findintro?cid=' + data.cid).then((response) => {
    if (response.data.state === 2001) {
      console.log(response.data)
      description.data = response.data.data;
    } else {
      description.data = {
        text1: '暂无描述',
        text2: '暂无描述'
      }
    }
    description.data.cid = data.cid;
  });
  editDescriptionVisible.value = true;
}

const updateDescription = () => {
  console.log("update");
  axios.put('http://localhost:8080/v1/coach/course/editintro', description.data).then((response) => {
    if (response.data.state === 2001) {
      ElMessage.success('修改成功');
    } else {
      ElMessage.error('修改失败');
    }
  });
}

const createCourse = () => {
  createCourseVisible.value = true;
}

const updateCourse = () => {
  console.log("update");
  if (newCourse.data.cname === '') {
    ElMessage.error('课程名不能为空');
  } else if (newCourse.data.stime === '') {
    ElMessage.error('请设置开始时间');
  } else if (newCourse.data.stime === '') {
    ElMessage.error('请设置结束时间');
  } else {
    newCourse.data.eid = localStorage.getItem('eid');
    axios.post('http://localhost:8080/v1/coach/course/add', newCourse.data).then((response) => {
      if (response.data.state === 2001) {
        ElMessage.success('添加成功');
        imgcid.value = response.data.data;
        submitUpload2();
        closeCreateCourse();
      } else {
        ElMessage.error('添加失败');
      }
    })
  }
}

const upLoadCourseImg = (index, data) => {
  console.log("cid",data.cid);
  imgcid.value = data.cid;
  upLoadCourseImgVisible.value = true;
}

const closeCourseImg = () => {
  courseImg.value.hasUrl = false;
  courseImg.value.imageUrl = '';
  uploader.value = null;
  upLoadCourseImgVisible.value = false;
}
const handleCourseImgSuccess = (response) => {
  courseImg.value.hasUrl = false;
  courseImg.value.imageUrl = '';
  console.log("response",response)
  console.log("courseImg",courseImg)
  if (response.state === 2001){
    ElMessage.success('上传课程图片成功')
  }else {
    ElMessage.error("上传课程图片失败")
  }
}

const handleCourseImgChange = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    courseImg.value.imageUrl = e.target.result; // 更新预览图
    courseImg.value.hasUrl = true;
  };
  reader.readAsDataURL(file.raw); // 读取文件内容
}

const submitUpload = () => {
  if (uploader.value) {
    uploader.value.submit(); // 手动触发上传
  }
};

const submitUpload2 = () => {
  if (uploader2.value) {
    uploader2.value.submit(); // 手动触发上传
  }
};

const load = () => {
  const eid = localStorage.getItem('eid')
  console.log(eid);
  axios.get('http://localhost:8080/v1/coach/course/list?eid=' + eid).then((response) => {
    if (response.data.state === 2001) {
      courses.data = response.data.data;
    }
  })
}

load()
</script>

<template>
  <div class="bg">
    <el-container>
      <el-header>
        <div class="header">
          <el-text size="large" tag="b">我的课程</el-text>
        </div>
        <hr>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <el-card shadow="always" width="100%" style="background-color: rgba(0,0,0,0);border: 0">
            <el-button type="primary" class="operate_button" @click="createCourse">
              新建课程
            </el-button>
            <br>
            <!--            <el-button type="primary" class="operate_button">-->
            <!--              查找课程-->
            <!--            </el-button>-->
          </el-card>
        </el-aside>
        <el-main>
          <el-card shadow="always" width="100%">
            <el-table :data="courses.data" style="width: 100%" border height="450">
              <el-table-column prop="cname" label="课程名" width="125"/>
              <el-table-column prop="count" label="选课人数" width="100"/>
              <el-table-column prop="stime" label="开始时间" width="160"/>
              <el-table-column prop="etime" label="结束时间" width="160"/>
              <el-table-column prop="classHours" label="课时数" width="125"/>
              <el-table-column prop="fullPrice" label="价格" width="100"/>
              <el-table-column prop="right" label="操作">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="getDescription(scope.$index,scope.row)">
                    查看描述
                  </el-button>
                  <el-button link type="primary" size="small" @click="editDescription(scope.$index,scope.row)">
                    编辑描述
                  </el-button>
                  <el-button link type="primary" size="small" @click="upLoadCourseImg(scope.$index,scope.row)">
                    上传课程图片
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" class="refresh_button" @click="load">刷新</el-button>
          </el-card>
          <el-dialog
              v-model="descriptionVisible"
              title="课程详情"
              width="50%"
              @close="closeDescription"
          >
            <div v-if="description.data" style="align-items: center">
              <el-card style="width:90%">
                <div>{{ description.data.text1 }}</div>
              </el-card>
              <el-card style="width:90%">
                <div>{{ description.data.text2 }}</div>
              </el-card>
            </div>
          </el-dialog>
          <el-dialog
              v-model="editDescriptionVisible"
              title="课程详情编辑"
              width="50%"
              @close="closeDescription"
          >
            <template #default>
              <el-form :model="description.data" style="padding-right: 50px; padding-top: 20px;">
                <el-form-item label="课程描述">
                  <el-input v-model="description.data.text1" type="textarea" :rows="1"></el-input>
                </el-form-item>
                <el-form-item label="详细描述">
                  <el-input v-model="description.data.text2" type="textarea" :rows="5"/>
                </el-form-item>
              </el-form>
            </template>
            <template #footer>
              <el-button @click="closeDescription">取消</el-button>
              <el-button type="primary" @click="updateDescription">保存</el-button>
            </template>
          </el-dialog>
          <el-dialog
              v-model="createCourseVisible"
              title="新增课程"
              width="50%"
              @close="closeCreateCourse"
          >
            <template #default>
              <el-form :model="newCourse.data" label-position="left" style="padding-right: 50px; padding-top: 20px;">
                <el-form-item label="课程图片" label-width="100px">
                  <el-upload
                      ref="uploader2"
                      class="avatar-uploader"
                      action="http://localhost:8080/v1/upload/courseImg"
                      :show-file-list="false"
                      :on-success="handleCourseImgSuccess"
                      :on-change="handleCourseImgChange"
                      :data="{ cid: imgcid}"
                      :auto-upload="false"
                      accept=".jpg,.jpeg,.png"
                  >
                    <img v-if="courseImg.hasUrl" :src="courseImg.imageUrl" class="avatar" alt=""/>
                    <el-icon v-else class="avatar-uploader-icon">
                      <Plus/>
                    </el-icon>
                  </el-upload>
                </el-form-item>
                <el-form-item label="课程名" label-width="100px">
                  <el-input v-model="newCourse.data.cname" placeholder="请输入课程名"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" label-width="100px">
                  <el-date-picker v-model="newCourse.data.stime" type="datetime" placeholder="选择开始时间"/>
                </el-form-item>
                <el-form-item label="结束时间" label-width="100px">
                  <el-date-picker v-model="newCourse.data.etime" type="datetime" placeholder="选择结束时间"/>
                </el-form-item>
                <el-form-item label="课时数" label-width="100px">
                  <el-input-number v-model="newCourse.data.classHours" min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="价格$" label-width="100px">
                  <el-input-number v-model="newCourse.data.fullPrice" precision="2" step="1" min="0"></el-input-number>
                </el-form-item>
              </el-form>
            </template>
            <template #footer>
              <el-button @click="closeCreateCourse">取消</el-button>
              <el-button type="primary" @click="updateCourse">创建</el-button>
            </template>
          </el-dialog>
          <el-dialog
              v-model="upLoadCourseImgVisible"
              title="上传课程图片"
              width="50%"
              @close="closeCourseImg"
          >
            <el-upload
                ref="uploader"
                class="avatar-uploader"
                action="http://localhost:8080/v1/upload/courseImg"
                :show-file-list="false"
                :on-success="handleCourseImgSuccess"
                :on-change="handleCourseImgChange"
                :data="{ cid: imgcid}"
                :auto-upload="false"
                accept=".jpg,.jpeg,.png"
            >
              <img v-if="courseImg.hasUrl" :src="courseImg.imageUrl" class="avatar" alt=""/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
            <template #footer>
              <el-button @click="closeCourseImg">取消</el-button>
              <el-button type="primary" @click="submitUpload">上传</el-button>
            </template>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.bg {
  color: black;
  text-align: center;
  margin: 0;
  padding: 0;
}

.header {

}

.operate_button {
  margin-bottom: 10px;
}

.refresh_button {
  float: right;
  margin: 10px;
}

.operate el-button {
  margin: 10px;
}

.avatar-uploader .avatar {
  width: 300px;
  height: 300px;
  display: block;
}

</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 300px;
  text-align: center;
}
</style>